{% extends "main.html" %}

{% block title %}{{ application_name }} - {{ page_name }}{% endblock %}

{% block head %}
	<script type="text/javascript" src="/static/javascript/tinymce/tiny_mce.js"></script>
	<script type="text/javascript">
	
	tinyMCE.init({
		mode: "textareas",
		theme: "simple",
		content_css: "/static/css/base.css",
		auto_focus: "mce_editor_0"
	});

	function addComment()
	{
		$('comment').style.display='inherit';
	}

	function closeComment()
	{
		tinyMCE.get('content').setContent("");
		$('comment').style.display='none';
	}	
	</script>
{% endblock %}	
			
{% block body %}

<span class="heading">{{ show_page.name }}</span> [<a class="inf" href="/pages/{{ show_page.name }}?mode=edit">Edit this Page</a>]
 {% if isAdmin %}[<a class="inf" href="/removePage?page_name={{ show_page.name }}">Delete this Page</a>] {%  endif %}
 [<a class="inf" {% if user %} href="javascript:addComment()" {% else %} href="{{ login_url|escape }}" {%  endif %} >Add Comment</a>] 

<span class="info"> Edited on {{ show_page.edited|date:"D, M j, Y \a\t P" }} GMT by <b>{{ show_page.user }}</b> </span>  

<div class="page">{{ show_page.content }}</div>
 [<a class="inf" {% if user %} href="javascript:addComment()" {% else %} href="{{ login_url|escape }}" {%  endif %} >Add Comment</a>] 
 
<b>Comments :</b><br />
{% for comment in show_page.comments %}
		<div class="comment">		
		<img src="/static/css/images/warning.png" /> by <b>{{ comment.user }}</b> on {{ comment.created|date:"D, M j, Y \a\t P" }} GMT <div> {{ comment.content }} </div></div>
{% endfor %}

<div id = "comment" class="comment" style="display:none;">
	<form name="commentForm" method="POST" action="/addComment">
		<input type="hidden" name="page_name" value="{{ show_page.name }}" />
		<table width="100%">
		<tr><td><textarea rows="3" id="content" style="width: 100%; height: 100px" name="content"></textarea></td></tr>
		<tr><td><input class="button" type="submit" value="Add"/><input type="button" value="Cancel" onclick="closeComment()" /></td></tr>
		</table>
	</form>
</div>

{% endblock %}
